<template>
	<view class="orders">
		<view class="menus dFlex jAround_aCenter">
			<view :class="['menuOne',status=='-1'?'active':'']" @tap='changeMenu("-1")'>
				<text>全部</text>
				<view class="line"></view>
			</view>
			<view :class="['menuOne',status=='0'?'active':'']" @tap='changeMenu("0")'>
				<text>待付款</text>
				<view class="line"></view>
			</view>
			<view :class="['menuOne',status=='10'?'active':'']" @tap='changeMenu("10")'>
				<text>待发货</text>
				<view class="line"></view>
			</view>
			<view :class="['menuOne',status=='20'?'active':'']" @tap='changeMenu("20")'>
				<text>待收货</text>
				<view class="line"></view>
			</view>
			<view :class="['menuOne',status=='30'?'active':'']" @tap='changeMenu("30")'>
				<text>待评价</text>
				<view class="line"></view>
			</view>
			<view :class="['menuOne',status=='40'?'active':'']" @tap='changeMenu("40")'>
				<text>退款/售后</text>
				<view class="line"></view>
			</view> 
		</view>
		<view class="list" v-if="list.length">
			<view class="order type2" v-for="(item,index) in list" :key='index' @tap.stop='lookDetail(item.id)'>
				<view class="orderNum dFlex jBetween_aCenter">
					<text>订单编号：{{item.orderno}}</text>
					<text class="status1" v-if="item.status == '0'">待付款</text>
					<text class="status1" v-if="item.status == '10'">待发货</text>
					<text class="status1" v-if="item.status == '20'">待收货</text>
					<text class="status1" v-if="item.status == '30'">待评价</text>
					<text class="status1" v-if="item.status == '40'">售后中</text>
					<text class="status1" v-if="item.status == '50'">售后结束</text>
					<text class="status1" v-if="item.status == '60'">已完成</text>
					<text class="status2" v-if="item.status == '90'">交易关闭</text>
				</view>
				<view class="orderInfo dFlex jStart_aCenter" v-for="(shop,idx) in item.ordergoods" :key='idx'>
					<view class="shopImg imgPublic">
						<image :src="shop.goods.main_img" mode="widthFix"></image>
					</view> 
					<view class="other">
						<view class="order_name dFlex jBetween_aCenter">
							<view class="shopName" v-if="shop.goods">{{shop.goods.title}}</view>
							<view class="user dFlex jStart_aCenter">
								<text class="rmb">￥</text>
								<text class="price">{{shop.total_money}}</text>
							</view>
						</view>
						<view class="selSpec dFlex jBetween_aCenter">
							<view class="spec" v-if="shop.goods_attr">规格：{{shop.goods_attr}}</view>
							<view class="spec" v-else-if="!shop.goods_attr && shop.goods.default_attr">规格：{{shop.goods.default_attr}}</view>
							<view class="spec" v-else>规格：默认规格</view>
							<text>x{{shop.goods_num}}</text>
						</view>
					<!-- 	<view class="btns dFlex jStart_aCenter" v-if="item.ordergoods.length>1">
							<view class="pay btn" v-if="shop.trade_status == '20'" @tap.stop='sureGet(item,idx)'>确认收货</view>
						</view> -->
					</view>
				</view>
				<view class="tj dFlex jEnd_aEnd">
					<view class="shopCount">共{{item.shopCount}}件商品</view>
					<view class="pay">{{item.is_pay==0?'待付款':"已付款"}}：<text>{{item.total_money}}</text></view>
				</view> 
				<view class="orderCount dFlex jEnd_aCenter" v-if='item.status < 30'> 
					<view class="btns dFlex jEnd_aCenter"> 
						<view class="btn" v-if="item.status == '0'" @click.stop="cancelOrder(item.id)">取消订单</view>
						<view class="pay" v-if="item.status == '0'" @click.stop="payOrder(item.id)">立即支付</view>
						<view class="pay" v-if="item.status == '20'" @click.stop="sureGet(item.id)">确认收货</view>
						<!-- <view class="btn" v-if="item.status >= '10' && item.status <= '30'">申请售后</view> -->
					</view>
				</view>
			</view>
		</view>
		<view class="list empty imgPublic" v-else>
			<image src="https://kmbs-ytk.oss-cn-qingdao.aliyuncs.com/cMini/empty.png" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	import {
		orderList,cancelOrder,orderPay,confirmOrderGoods
	} from '@/tools/http.js';
	import {domain} from '@/tools/config.js'
	export default {
		data() {
			return {
				status:'-1', // -1全部订单  0待付款  10待发货  20 待收货  30 待评价  40 售后
				
				page:1,
				list:[],
				load:false,
				
				ztFlag:false,
				ztInfo:{},
			};
		},
		onLoad(e) {
			this.status = e.status;
		},
		onShow(){
			this.page = 1;
			this.initList();
		},
		onReachBottom() {
			if(this.load){
				this.load = false;
				this.page++;
				this.initList();
			}
		},
		methods:{
			// 订单列表
			async initList(){
				let res = await orderList({
					status:this.status,
					page:this.page,
					pageSize:10,
				});
				if(res){
					// let orderCount = 0;// 待支付状态存在的订单关闭的数目
					res.map((item,index)=>{
						item.shopCount = 0;
						let partCount = 0;
						let plCount = 0;
						item.ordergoods.map((item2,index2)=>{
							var reg=/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
							if(!reg.test(item2.goods.main_img)){
								item2.goods.main_img = domain+item2.goods.main_img;
							}
							item.shopCount = item.shopCount + item2.goods_num;
							if(!item.source){
								if(item2.trade_status == 20){
									partCount++;
								}
							}else{
								if(item2.storage_status == 1){
									partCount++;
								}
							}
							if(item2.is_commented == 0){
								plCount ++;
							}
						})
						if(item.status == 10 && partCount>0){
							item.partFlag = true;
						}else{
							item.partFlag = false;
						}
						if(item.status == '60' && plCount>0){
							item.plFlag = true;
						}else{
							item.plFlag = false;
						}
						// if(this.status == '0' && item.status == '90'){
						// 	orderCount++;
						// 	this.page == 1;
						// 	this.initList();
						// }
					})
					this.list = this.page == 1?res:this.list.concat(res);
					this.load = res.length>=10?true:false;
				}
			},
			// 取消订单
			cancelOrder(orderId,idx){
				uni.showModal({
					content:'确定取消该订单？',
					success: async (op) => {
						if(op.confirm){
							let res = await cancelOrder({
								id:orderId
							})
							if(res){
								uni.showToast({
									title:'订单已取消',
									icon:"none",
								})
								this.page = 1;
								this.initList();
							}
						}
					},
				})
			},
			// 切换菜单
			changeMenu(status){
				this.status = status;
				this.page = 1;
				this.initList();
			},
			// 确认收货
			sureGet(){
				uni.showModal({
					content:'确认已收到全部商品并检查无误',
					success: async (op) => {
						if(op.confirm){
							let res = await confirmOrderGoods({
								oid:this.orderId,
							});
							if(res){
								this.page = 1;
								this.initList();
							}
						}
					}
				})
			},
			// 订单详情
			lookDetail(orderId){
				uni.navigateTo({
					url:'./orderDetail?orderId='+orderId,
				})
			},
			// 支付订单
			async payOrder(orderId){
				uni.showActionSheet({
					itemList:['微信支付','余额支付'],
					success: async (op) => {
						let res = await orderPay({
							oid:orderId,
							pay_type:op.tapIndex == '0' ? 'wxpay' : 'balance',
						});
						console.log('返回结果');
						console.log(res);
						if(op.tapIndex == '0'){
							if(res){
								uni.requestPayment({
									provider:'wxpay', 
									timeStamp:res.info.timeStamp,
									nonceStr:res.info.nonceStr,
									package:res.info.package,
									signType:res.info.signType,
									paySign:res.info.paySign, 
									success: (pay) => {
										uni.showToast({ 
											title:'订单支付成功',
											icon:"success"
										})
										this.page = 1;
										this.initList();
									},
									fail:(err)=>{
										console.log(err);
										uni.showToast({
											title:'取消支付',
											icon:"none"
										})
									}
								})
							}
						}else{
							if(res){
								uni.showToast({
									title:'订单支付成功',
									icon:"success"
								})
								this.page = 1;
								this.initList();
							}
						}
					},
					fail:(err)=>{
						console.log(err);
					}
				})
			},
			// 评价商品
			pinglun(id){
				uni.navigateTo({
					url:'./evaluate?id='+id
				})
			},
			// 邀请其他用户
			shareOrder(line){
				uni.navigateTo({
					url:'./shareAdv?id='+line.ordergoods[0].goods.id+'&inviteId='+line.source_id,
				})
			},
			// 查看物流
			wuliu(line){
				uni.navigateTo({
					url:'./logistics?id='+line.id
				})
			},
			// 删除订单
			delOrder(orderId){
				uni.showModal({
					content:'确定删除该订单？',
					success: (op) => {
						if(op.confirm){
							this.tool.getData('/api/mall/deleteOrder',{
								id:orderId
							}).then(res=>{
								console.log(res);
								if(res){
									this.page = 1;
									this.initList();
								}
							}).catch(err=>{
								console.log(err);
							})
						}
					},
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: #F6F6F6;
	}
	.orders{
		width: 100%;
		.list{
			width: 100%;
			padding: 0 3%;
			box-sizing: border-box;
			.type2{
				.orderInfo{
					width: 100%;
					margin-bottom: 8px;
					.shopImg{
						width:184rpx;
						height: 184rpx;
						overflow: hidden;
						background: white;
						margin-right: 12px;
						border-radius: 8px;
					}
					.other{
						width:calc(100% - 104px);
						.btns{
							width: 100%;
							margin-top: 6px;
							.btn{
								font-size: 12px;
								width: max-content;
								border-radius: 40px;
								color: #999999;
								border: 1px solid #D6D6D6;
								padding: 4px 12px;
								margin-right: 8px;
							}
							.pay{
								font-size: 12px;
								width: max-content;
								border-radius: 40px;
								padding: 4px 12px;
								margin-left: 8px;
								color: #3E8EF0;
								border:1px solid #3E8EF0;
							}
						}
						.order_name{
							width:100%;
							.user{
								color: #666666;
								.rmb{
									color: #333333;
									font-size: 12px;
								}
								.price{
									color: #333333;
									font-size: 16px;
									display: inline-block;
								}
							}
							.shopName{
								font-size: 15px;
								word-break: break-all;
								overflow: hidden;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
							}
						}
						.selSpec{
							color: #999999;
							margin: 8px 0 4px;
						}
						
					}
				}
				.shopInfo:last-child{
					margin: 0;
				}
			}
			.type2{
				width:100%;
				background:white;
				border-radius:8px;
				margin-bottom: 12px;
				.tj{
					width: 100%;
					padding:8px 12px;
					box-sizing: border-box;
					border-top: 1px solid #F9F9F9;
					border-bottom: 1px solid #F9F9F9;
					.shopCount{
						color: #999999;
					}
					.pay{
						text{
							color:#EB0C0C;
							font-weight: bold;
							font-size: 20px;
						}
						margin-left: 10px;
					}
				}
				.orderCount{
					width: 100%;
					padding:0 12px 12px;
					box-sizing: border-box;
					.btns{
						width: auto;
						.btn{
							font-size: 12px;
							width: max-content;
							border-radius: 40px; 
							border: 1px solid #D6D6D6;
							padding: 4px 12px;
							margin-left: 8px;
							background: none;
						}
						.pay{
							font-size: 12px;
							width: max-content;
							border-radius: 40px;
							padding: 4px 12px;
							margin-left: 8px;
							background: #3E8EF0;
							color: white;
							border:1px solid #3E8EF0;
						}
					}
				}
				.orderInfo{
					width: 100%;
					padding: 12px;
					box-sizing: border-box;
					.orderTime{
						font-size: 12px;
						color: #999999;
					}
					.shopInfo{
						width:100%;
						margin-bottom: 12px;
						.base{
							flex: 1;
							.shopName{
								flex: 1;
								font-weight: bold;
							}
							.tags{
								line-height: 16px;
								font-size: 12px;
								padding: 0 4px;
								color: white;
								border-radius: 4px;
								background: #3E8EF0;
								margin-right: 8px;
							}
						}
						.price{
							font-size: 12px;
							color: #FF0000;
							text{
								font-size: 14px;
							}
						}
					}
				}
				
				.orderNum{
					width:100%;
					padding: 12px;
					box-sizing: border-box;
					color:#999999;
					.cutDown{
						background:rgba(121, 207, 171,0.2);
						border-radius: 40px;
						.showStatus{
							border-radius: 40px;
							color: white;
							background: #3E8EF0;
							line-height: 16px;
							padding: 2px 6px;
						}
						.time{
							padding: 2px 4px;
							color: #3E8EF0;
						}
					}
					.status1{
						color: #3E8EF0;
					}
					.status2{
						color: #FF0000;
					}
				}
			}
		}
		.menus{
			width: 100%;
			// padding: 0 6px;
			box-sizing: border-box;
			margin-bottom: 12px;
			background: white;
			overflow: hidden;
			overflow-x: auto;
			-webkit-overflow-scrolling: touch;
			white-space: nowrap;
			.menuOne{
				width: auto;
				text-align: center;
				// padding: 11px 12.5px 0;
				padding: 11px 0 0;
				display: inline-block;
				color: #666666;
				.line{
					width: 20px;
					height: 3px;
					background: white;
					margin: 8px auto 0;
					border-radius: 10px;
				}
			}
			.active{
				color: #3E8EF0;
				font-weight: bold;
				.line{
					background: #3E8EF0;
				}
			}
			.menuOne:first-child{
				padding-left:18px;
			}
			.menuOne:last-child{
				padding-right:18px;
			}
		}
	}
	.iosPage{
		padding-bottom:env(safe-area-inset-bottom);
	}
</style>
